<template>
  <div class="page-container">
    <h2 class="page-title">品牌专区</h2>
    <div class="grid">
      <el-card v-for="b in brands" :key="b.id" class="card" shadow="hover">
        <img :src="b.logo" class="logo" />
        <div class="name">{{ b.name }}</div>
        <div class="country">{{ b.country }}</div>
      </el-card>
    </div>
  </div>
</template>
<script setup>
const brands = [
  { id: 1, name: '苹果', country: '美国', logo: '/images/brands/apple.png' },
  { id: 2, name: '华为', country: '中国', logo: '/images/brands/huawei.png' },
  { id: 3, name: '小米', country: '中国', logo: '/images/brands/xiaomi.png' },
  { id: 4, name: '三星', country: '韩国', logo: '/images/brands/samsung.png' }
]
</script>
<style scoped>
.page-container { max-width: 1100px; margin: 0 auto; padding: var(--spacing-xl); }
.page-title { font-size: var(--font-size-xl); font-weight: var(--font-weight-bold); margin-bottom: var(--spacing-lg); }
.grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: var(--spacing-lg); }
.card { display: flex; flex-direction: column; align-items: center; gap: var(--spacing-sm); }
.logo { width: 96px; height: 96px; object-fit: contain; }
.name { font-weight: var(--font-weight-medium); }
.country { color: var(--text-secondary); }
</style>